<template>
    <!-- logo显示 -->
    <div id="logo"><a title="PandaSO,一款简洁的搜索导航">
            <img alt="PandaSO-AI" src="../assets/img/pandaAI.svg">PandaSO--AI</a>
    </div>
    <!-- chat--ai搜索 -->
    <div id="site-main">
        <div id="search-bar">
            <div id="container">
                <div id="headline-content">
                    <!-- 创建了一个搜索功能的表单 -->
                    <form id="search-form">
                        <input id="search-keyword" type="search" placeholder="输入你的需求" v-model="req">
                        <input id="search-form-submit" class="float-right" type="submit" value="Ai搜索"
                            @click="get_chat_output(req)">
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 搜索结果 -->
    <div class="chat-output-line">PandaSO：AI推荐</div>
    <el-skeleton animated :loading="isLoading" />
    <el-button type="primary" :loading="isLoading" color="black" style="position: fixed; right:20px ;" @click="get_chat_output_others()">换一批</el-button>
    <div class="chat-output" v-show="!isLoading">
        <ul class="glass-card-container" v-for="msg in messages['content']" :key="msg">
            <li>
                <div class="glass-card">
                    <a :href="msg['url']" class="custom-link" target="_blank">
                        <img :src="msg['img']" onerror="this.src='https://img1.imgtp.com/2023/06/13/Ln6e8F6O.jpg'">
                        <div class="title">{{ msg['title'] }}</div>
                        <div class="content">{{ msg['reason'] }}</div>
                    </a>
                </div>
            </li>
        </ul>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { getChatGPTResponse, getChatGPTResponseOther } from '../api/outapi'
import { onMounted } from 'vue';
import { storage,checkUserLogin } from '../utils';
import { useToTalks } from '../store';
import { updatechat_output } from '../api/post';
import { getUserLastSearchChat } from '../api/get';
const req = ref("")
const messages = ref<any>({
    content: []
})
const isLoading = ref(false)
const usetake = useToTalks()
// 利用onMount函数：初始化需求搜索记录
// 判断是否登录
// 登录了，从服务器获取最新的搜索结果，并且放到本地存储
// 未登录，判断本地是否有存储的搜索结果
//         有，读取本地的搜索结果
//         无，不操作
onMounted(async () => {
    const isLoggedIn = await checkUserLogin()
    const islocalE = storage.get("chat_output")
    if (isLoggedIn) {
        getUserLastSearchChat().then(res=>{
            storage.set("chat_output", res.data)
            messages.value = storage.get("chat_output") 
        })
    } else {
        if(!islocalE){
           storage.set("chat_output", '')
        }
        messages.value= storage.get("chat_output")
    }
})
// 一个简单的异步操作：完成了调用自定义的openai接口 返回固定格式的数据，并解析数据
async function get_chat_output(requirements: string) {
    if ('' !== requirements) {
        isLoading.value = true
        usetake.restart()
        const response = await getChatGPTResponse(requirements)
        messages.value = JSON.parse(response)
        storage.set("chat_output", messages.value)
        update_chat_output()
        isLoading.value = false
    } else {
        messages.value = []
        storage.set("chat_output", '')
    }
}
// 一个简单的异步操作：完成了调用自定义的开启了多轮回答的openai接口 返回固定格式的数据，并解析数据
async function get_chat_output_others() {
    if ('' !== req.value) {
        isLoading.value = true
        const response = await getChatGPTResponseOther()
        messages.value.content = response.content
        storage.set("chat_output", messages.value)
        update_chat_output()
        isLoading.value = false
    } else {
        messages.value = []
        storage.set("chat_output", '')
    }
}

// 登录情况下，去同步更新服务器中的需求历史
function update_chat_output(){
    if(checkUserLogin()){
        updatechat_output(messages.value.content)
    }else{
        // 不操作
    }
}


</script>
<style scoped>
@import "../style/chat.css";

.custom-link {
    text-decoration: none;
    color: inherit;
    /* 其他自定义样式 */
}
</style>